<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称:</div>
      <el-input v-model="addForm.enterpriseName" placeholder="请输入内容" class="search-main" />
      <div class="block">
        <span class="demonstration">缴费时间:</span>
        <el-date-picker
          v-model="sometime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="transformation"
        />
      </div>
      <el-button type="primary" @click="addchaxun">查询</el-button>
    </div>
    <!-- 新增表单 -->
    <el-dialog
      title="添加账单"
      :visible="dialogVisible"
      width="30%"
      @close="closeDialog"
      @open="shijian"
    >
      <div class="form-container">
        <el-form ref="addFormoff" :model="addFormoff" :rules="addFormoffRules">
          <el-form-item label="选则租户" prop="enterpriseId">
            <el-select v-model="addFormoff.enterpriseId" placeholder="请选择租户">
              <el-option
                v-for="item in roleList"
                :key="item.enterpriseId"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-select v-model="addFormoff.buildingId" placeholder="请选择租赁楼宇">
              <el-option
                v-for="item in roleListop"
                :key="item.buildingId"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="缴费时间:" prop="startTime">
            <span class="demonstration" />
            <el-date-picker
              v-model="valiuer"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="jianting"
            />
          </el-form-item>
          <el-form-item label="支付金额" prop="paymentAmount">
            <el-input
              v-model="addFormoff.paymentAmount"
              placeholder="请输入支付金额"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="addFormoff.paymentMethod" placeholder="请选择支付方式">
              <el-option label="微信" value="1" />
              <el-option label="支付宝" value="2" />
              <el-option label="现金" value="3" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </span>
    </el-dialog>
    <el-button type="primary" @click="addTjia">添加账单</el-button>
    <!-- 表格区域 -->
    <div class="table">
      <el-table
        style="width: 100%"
        :data="liebiaoList"
      >
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          label="账单编号"
          width="180"
          prop="billNumber"
        />
        <el-table-column
          label="	企业名称"
          prop="enterpriseName"
        />
        <el-table-column
          label="租赁楼宇"
          width="120"
          prop="buildingId"
        />
        <el-table-column
          label="	物业费(元/m²)"
          prop="propertyFeePrice"
        />
        <el-table-column
          label="	账单金额(元)"
          prop="paymentAmount"
        />
        <el-table-column
          label="	缴费时间"
          prop="createTime"
        />
        <el-table-column
          label="操作"
        >
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              @click="chakanapp(scope.row.id)"
            >查看</el-button>
            <el-button
              size="mini"
              type="text"
              @click="Delabout(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-container">
        <el-pagination
          layout="total, prev, pager, next"
          :total="total"
          :page-size="addForm.pageSize"
          @current-change="pageChange"
        />
      </div>
    </div>
    <el-dialog
      title="查看账单"
      :visible="dialogVisiblel"
      width="30%"
      @close="handleClose"
    >
      <p>租户名称：{{ xunList.enterpriseName }}</p>
      <p>租赁楼宇：{{ xunList.buildingName }}</p>
      <p>缴费周期：{{ xunList.startTime }} 至{{ xunList.endTime }}</p>
      <p>物业费(元/m²):{{ xunList.propertyFeePrice }}</p>
      <p>账单金额(元):{{ xunList.paymentAmount }}</p>
      <p>支付方式：{{ xunList.paymentMethod }}</p>
      <p>缴费时间：{{ xunList.createTime }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblel = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisiblel = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleListAPI, getenterprisetAPI, getbuildingAPI, getyusuanAPI, gettianjaiAPI, getdelshuAPI, getchaxunAPI } from '@/api/Property'
export default {
  name: 'Building',
  data() {
    return {
      addForm: {
        enterpriseName: '',
        end: '',
        start: '',
        page: 1,
        pageSize: 10

      },
      sometime: '',
      liebiaoList: [],
      total: 0,
      dialogVisible: false,
      dialogVisiblel: false,
      roleList: [],
      roleListop: [],
      xunList: [],
      valiuer: '',

      addFormoff: {
        enterpriseId: null,
        buildingId: null,
        startTime: null,
        endTime: null,
        paymentAmount: null,
        paymentMethod: null
      },
      addFormoffRules: {
        enterpriseId: [
          { required: true, message: '请选择租户', trigger: 'blur' }
        ],
        buildingId: [
          { required: true, message: '请选择租赁楼宇', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请输入时间', trigger: 'blur' }
        ],
        paymentAmount: [
          { required: true, message: '请输入支付金额', trigger: 'blur' }
        ],
        paymentMethod: [
          { required: true, message: '请选择员工状态', trigger: 'blur' }
        ]
      }
    }
  },
  // 监听返回金额
  watch: {
    addFormoff: {
      async handler(val) {
        const { buildingId, startTime, endTime } = val
        if (buildingId && startTime && endTime) {
          const { data } = await getyusuanAPI({ buildingId, startTime, endTime })
          this.addFormoff.paymentAmount = data
        } else {
          this.addFormoff.paymentAmount = 0
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getRoleList()
  },
  methods: {
    // 查看是打开弹框
    async chakanapp(id) {
      const res = await getchaxunAPI(id)
      this.xunList = res.data
      this.dialogVisiblel = true
    },
    // 查看关闭弹框
    handleClose() {
      this.dialogVisiblel = false
    },
    // 删除
    async Delabout(id) {
      console.log(id)
      await getdelshuAPI(id)
      this.getRoleList()
    },
    // 点击确定确认添加
    confirmAdd() {
      this.$refs.addFormoff.validate(async(vaild) => {
        if (vaild) {
          await gettianjaiAPI(this.addFormoff)
          this.getRoleList()
          this.dialogVisible = false
        }
      })
    },
    // 企业数据
    async getenterpriset() {
      const res = await getenterprisetAPI()
      // console.log(res)
      this.roleList = res.data
    },
    // 楼宇数据
    async  getbuilding() {
      const res = await getbuildingAPI()
      // console.log(res)
      this.roleListop = res.data
    },
    // 添加时间绑定
    jianting() {
      if (this.valiuer) {
        this.addFormoff.startTime = this.valiuer[0]
        this.addFormoff.endTime = this.valiuer[1]
      } else {
        this.addFormoff.startTime = this.addFormoff.endTime = ''
      }
    },
    // 查询时间的绑定
    transformation() {
      if (this.sometime) {
        this.addForm.start = this.sometime[0]
        this.addForm.end = this.sometime[1]
      } else {
        this.addForm.start = this.addForm.end = ''
      }
    },
    // 查询按钮
    addchaxun() {
      this.getRoleList()
    },
    // 数据页面
    async getRoleList() {
      const res = await getRoleListAPI(this.addForm)
      this.liebiaoList = res.data.rows
      this.total = res.data.total
    },
    // 分页
    pageChange(page) {
      this.addForm.page = page
      this.getRoleList()
    },
    // 打开弹框
    addTjia() {
      this.dialogVisible = true
    },
    // 关闭弹框
    closeDialog() {
      this.dialogVisible = false
    },
    shijian() {
      this.getenterpriset()
      this.getbuilding()
    }
  }
}

</script>

<style lang="scss" scoped>
.department-container{
  padding:10px;
}
.search-container{
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237,237,237,.9);;
  padding-bottom: 20px;
  .search-label{
    width:100px;
  }
  .search-main{
    width: 220px;
    margin-right: 10px;
  }
}
.el-form{
  .el-select{
 width: 100%;
 } }
</style>
